<template>
    <Modal
            v-model="modelShow"
            title="抽查"
            width="1000">
        <Form :model="searchObj" inline>
            <FormItem>
                <Input @on-enter="getListAction()" icon="ios-search" v-model="searchObj.name" class="search-input"
                       @on-click="getListAction()" placeholder="请输入姓名"/>
            </FormItem>
            <FormItem>
                <Input @on-enter="getListAction()" @on-click="getListAction()" icon="ios-search" v-model="searchObj.id_card" class="search-input"
                        placeholder="请输入身份证号"/>
            </FormItem>
        </Form>
        <Table :loading="tableLoading" border max-height="400" :columns="tableColumn" :data="tableData" size="small">
            <template slot-scope="{ row }" slot="sex">
                <div v-if="row.sex == '0'">男</div>
                <div v-if="row.sex == '1'">女</div>
            </template>
            <template slot-scope="{ row }" slot="state">
                <div v-if="row.state == '1'">待分配</div>
                <div v-if="row.state == '2'">待交接</div>
                <div v-if="row.state == '3'">已分配</div>
                <div v-if="row.state == '4'">已驳回</div>
            </template>
            <template slot="action" slot-scope="{ row }">
                <Button class="table-action-btn" type="info" size="small" @click="infoAction(row)">详情</Button>
            </template>
        </Table>
        <div slot="footer">
            <Button type="text" @click="cancelAction">关闭</Button>
        </div>
    </Modal>
</template>

<script>
import { getRecordCheckList } from '@/api/record'

export default {
  name: 'SpotCheckModel',
  data () {
    return {
      searchObj: {},
      modelShow: false,
      tableLoading: false,
      tableColumn: [
        { title: '档号', key: 'recode_no', width: 150, align: 'center' },
        { title: '机构编号', key: 'company_code', width: 100, align: 'center' },
        { title: '状态', slot: 'state', width: 100, align: 'center' },
        { title: '姓名', key: 'name', width: 170, align: 'center' },
        { title: '身份证号', key: 'idcard', width: 160, align: 'center' },
        { title: '性别', slot: 'sex', width: 140, align: 'center' },
        { title: '交接流水号', key: 'manager_recode_no', width: 120, align: 'center' },
        { title: '操作', align: 'center', minWidth: 180, slot: 'action', fixed: 'right' }
      ],
      tableData: []
    }
  },
  props: {
    recordId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  methods: {
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    modelAction () {
      this.modelShow = !this.modelShow
    },
    infoAction (row) {
      this.$router.push({
        name: 'recordMaterials',
        query: { id: row.id, type: 'accept' }
        // params: { options: this.recordId }
      })
    },
    getListAction () {
      const data = {
        name: this.$common.xeUtils.trim(this.searchObj.name),
        id_card: this.$common.xeUtils.trim(this.searchObj.id_card)
      }
      this.tableLoading = true
      getRecordCheckList(data).then(ret => {
        const data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data
          this.tableLoading = false
        } else {
          this.error(data)
          this.tableLoading = false
        }
      })
    },
    cancelAction () {
      this.modelShow = false
    }
  },
  computed: {}
}
</script>

<style scoped>

</style>
